DHTMLX Documentation

Custom statistics counter (automatically calculated values)

Implementing new types of statistics counters

Statistics Counters are sub-sets of header|footer shortcuts which are used to show aggregated values inside header|footer cells. They are created in the way similar to that of normal shortcuts creation but have some specific features.

The simplest statistics counter can be created by using the code snippet similar to the following one:

grid._in_header_stat_count=function(tag,index,c){             //shortcut for statistics counter
    var calck=function(){                                               // define the function which will be used for calculations
        return this.getRowsNum();
    }
    this._stat_in_header(tag,calck,index,c);                    //call default statistics handler processor
}

There are some differences between default shortcats and statistics counters:

Instead of setting some predefined value, statistics value is defined as an inner function. As for the normal content, we define a function, which will be called each time when the data is changed in the grid. The result of such function will be used as a header|footer value.
_stat_in_header method is used to register a new statistics counter. It is possible to attach all the necessary events manually, but it is much simpler to call the predefined method which will do it automatically;
The third argument of the function is the array of the surrounding content (if you have "about {#stat_sum}$" as header value, then c == ["above","$"]); it will be processed automatically, there is no need to take any additional steps to process it.

The previous snippet is pretty simple - it always returns the current number of rows. Lets look at the more advanced case:

grid._in_header_stat_summ=function(tag,index,c){         // shortcut for statistics counter
    var calck=function(){                                           // define the function which will be used for calculations
        var summ=0;                                                 // set initial counter value
        this.forEachRow(function(id){                         // for each row
            summ+=this.cells(id,index).getValue();        // add row_value
        })
        return summ;
    }
this._stat_in_header(tag,calck,index,c);             //call default statistics handler processor
}

This snippet uses a slightly more complex approach: each time when any changes in the grid occur and the calculation function is called, the code iterates through all the rows and calculates the sum of value in the related cells.
Be sure you checked the iteration through grid article.

Basically you can use the above mentioned snippet, as it is pretty universal and you just need to change the name and the math function inside it.
For example, the following code can be used to calculate the mean square deviation:

grid._in_header_stat_deviation=function(tag,index,c){ //the marker for statistics counter
    var calck=function(){ // define the function which will be used for calculations
        var summ=0; //set initial
        this.forEachRow(function(id){
            summ+=Math.pow(this.cells(id,index).getValue,2);
        })
        return summ/this.getRowsCount();
    }
this._stat_in_header(tag,calck,index,c); //call the default statistics handler processor
}

As you can see the changes are minimal - we just added some math to the calculations.
The given above code has one problem - the result of the divisions can be the fractional value (such as 0.33333333). But in most cases we want the result to be neatly formated.
The simplest way to fix this issue directly is as follows:

return Math.round(summ/this.getRowsCount()*100)/100;

This will round the value to 2 digits in a simple and fast way.
To apply a more complex formatting it is possible to use the grid built-in formatting (set by grid.setNumberFormat) command:

return this._aplNF(summ,index);

The confusing _aplNF stands for the name of the inner grid function which is used for edn excells and can be reused to apply the same formating to autocalculated values.

As with the normal shortcuts, statistics counters can be defined on prototype level, so all the instances of the grid will be affected:

dhtmlXGridObject.prototype._in_header_SOME=function(tag,index){
....
}

Attaching statistics counters to external objects

While the main purpose of statistics counters is to show data inside the headers|footers of the grid, it is pretty easy to use them to fill some custom area on the page with the related data.

For example, if you have the following code:

grid._in_header_stat_count=function(tag,index,c){             //shortcut for statistics counter
    var calck=function(){                                               // define the function which will be used for calculations
        return this.getRowsNum();
    }
    this._stat_in_header(tag,calck,index,c);                    //call the default statistics handler processor
}

And somewhere on the page you have:

there are <span id="grid_count"></span> rows in my grid

You can link stat_count to the span element in the following way:

grid._in_header_stat_count(document.getElementById('grid_count'),1);

After such command the content of grid_count element will be always equal to the number of rows in the grid.
One cool detail should be noted here: if you add|delete the rows or reload the grid, the content of html tag will be correctly updated after each operation.

The same trick can be used with any "in header shortcut", but there is no much sense in it for the static ones.